<template>
    <div class="require-follow-wrap">
        <h-section title="需求跟进信息" collapse>
            <flexbox justify="flex-end">
                <a-button type="primary" :disabled="disabled" @click="handleAddFollow"><PlusCircleOutlined />添加跟进</a-button>
            </flexbox>
            <a-divider v-if="followList.length" />
            <a-timeline class="follow-timeline-cont">
                <a-timeline-item v-for="(item, index) of followList" :key="item.id">
                    <p>
                        {{ item.createTime }} <a-tag :color="getColor(item.feedBack)">{{ item.feedBack }}</a-tag>
                        <my-icon type="iconbianji" @click="handleEdit(item.id)" v-if="!disabled" /><my-icon
                            type="iconshanchu"
                            @click="handleDelete(item.id, index)"
                            v-if="!disabled"
                        />
                    </p>
                    <flexbox align="flex-start">
                        <div style="white-space: pre-wrap" v-html="item.modifyScheme" />
                    </flexbox>
                </a-timeline-item>
            </a-timeline>
        </h-section>
        <add-follow ref="addFollowRef" :detail="detail" @success="addFollowSuccess" />
    </div>
</template>

<script lang="ts">
import { PlusCircleOutlined } from '@ant-design/icons-vue';
import AddFollow from './addFollow.vue';
import api from '@/api';
import { useMessage } from '@/hooks/common/useMessage';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, getCurrentInstance } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    components: {
        PlusCircleOutlined,
        AddFollow
    },
    setup(props) {
        const instance: any = getCurrentInstance();
        const addFollowRef = ref<any>(null);
        const followList = ref<any[]>([]);
        const getColor = (type) => {
            switch (type) {
                case '跟进中':
                    return 'blue';
                case '待明确':
                    return 'orange';
                case '无需修改':
                    return 'green';
                case '不修改':
                    return 'green';
                case '修改':
                    return 'red';
            }
        };
        const handleAddFollow = () => {
            unref(addFollowRef).open();
        };
        const handleEdit = (id: number) => {
            unref(addFollowRef).open(id);
        };
        const handleDelete = (id: number, index: number) => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: '确认删除当前数据?',
                iconType: 'danger',
                onOk: async () => {
                    const query = {
                        id
                    };
                    const { success, errorMsg } = await api.trackInformationModel.deleteById(query);
                    if (success) {
                        message.success('删除成功');
                        followList.value.splice(index, 1);
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        const getFollowList = async () => {
            const query = {
                id: props.detail.id
            };
            const { success, moule } = await api.trackInformationModel.findByRequireId(query);
            if (success) {
                followList.value = [...moule];
            }
        };
        const addFollowSuccess = () => {
            getFollowList();
            instance.proxy.$mitt.emit('updateTaskDetail');
        };
        const validate = () => {
            return Promise.resolve(true);
        };
        getFollowList();
        return {
            addFollowRef,
            followList,
            handleAddFollow,
            handleEdit,
            handleDelete,
            getFollowList,
            addFollowSuccess,
            validate,
            getColor
        };
    }
});
</script>

<style scoped lang="less">
.require-follow-wrap {
    .follow-timeline-cont {
        .anticon {
            margin-left: 8px;
            cursor: pointer;
        }
    }
}
</style>